<!--不使用脚手架生成 浏览器引入一个 使用Vue3 、ElementPlus 、axios、antd 的 单页面项目-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vue Project</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入 Element Plus 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- 引入 antd 样式 -->
    <!-- 引入antd的CSS文件 -->
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd/dist/antd.css">-->
    <!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.4.0/antd.min.css">-->
</head>

<body>
<div id="app">
    <h1>欢迎来到我的单页面应用</h1>
    <button @click="fetchData">获取数据</button>
    <p v-if="data">{{ data }}</p>
    <el-button @click="initForm">Element Plus 按钮</el-button>
    <antd-button>Antd 按钮</antd-button>

    <div>
        <h1>AI Prompt </h1>
        <el-form-item>
            <el-button @click="getPriceFunc">获取价格</el-button>

            <el-button @click="getLastMonthFunc">获取上月数据</el-button>

        </el-form-item>

        <div>
            <el-form ref="formRef" :model="form" label-width="100px" :inline="true" class="demo-form-inline">
                <br>
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="form.title" placeholder="请输入标题" clearable/>
                        </el-form-item>
                    </el-col>
                    <!--            <el-col :span="8">-->
                    <!--              <el-form-item label="用户 ID" prop="userId">-->
                    <!--                <el-input-number v-model="form.userId" :min="0" :max="9999999999" @change="handleChange"/>-->
                    <!--              </el-form-item>-->
                    <!--            </el-col>-->
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="任务_根据" prop="task_based_on">
                            <el-input type="textarea" v-model="form.task_based_on" placeholder="请输入任务_根据"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="任务_动作" prop="task_action">
                            <el-input type="textarea" v-model="form.task_action" placeholder="请输入任务_动作"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="任务_目标" prop="task_objective">
                            <el-input type="textarea" v-model="form.task_objective" placeholder="请输入任务_目标"
                                      :autosize="{ minRows: 5, maxRows: 100 }"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="参考信息_背景目标" prop="reference_background_information">
                            <el-input type="textarea" v-model="form.reference_background_information"
                                      placeholder="请输入参考信息_背景目标" :autosize="{ minRows: 5, maxRows: 100 }"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="参考信息_待处理文本" prop="reference_processed_text">
                            <el-input type="textarea" v-model="form.reference_processed_text" :autosize="{ minRows: 5, maxRows: 100 }"
                                      placeholder="请输入参考信息_待处理文本"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="输出要求_内容" prop="output_requirement_content">
                            <el-input v-model="form.output_requirement_content" placeholder="请输入输出要求_内容" :autosize="{ minRows: 5, maxRows: 100 }"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="输出要求_标准" prop="output_standards">
                            <el-input v-model="form.output_standards" placeholder="请输入输出要求_标准" clearable :autosize="{ minRows: 5, maxRows: 100 }"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="输出要求_步骤" prop="output_steps">
                            <el-input v-model="form.output_steps" placeholder="请输入输出要求_步骤" clearable :autosize="{ minRows: 5, maxRows: 100 }"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="输出要求_风格要求" prop="output_style">
                            <el-input v-model="form.output_style" placeholder="请输入输出要求_风格要求" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="输出要求_格式要求" prop="output_format">
                            <el-input v-model="form.output_format" placeholder="请输入输出要求_格式要求" clearable/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="输出要求_字数要求" prop="output_word_count">
                            <el-input v-model="form.output_word_count" placeholder="请输入输出要求_字数要求" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="示例1" prop="example1">
                            <el-input type="textarea" v-model="form.example1" placeholder="请输入示例1" :autosize="{ minRows: 5, maxRows: 100 }"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="示例2" prop="example2">
                            <el-input type="textarea" v-model="form.example2" placeholder="请输入示例2"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户输入" prop="input">
                            <el-input type="textarea" v-model="form.input" placeholder="请输入用户输入"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="指定输出任务" prop="output">
                            <el-input type="textarea" v-model="form.output" placeholder="请输入指定输出任务"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="24">
                        <!--            <el-form-item label="生成提示词" prop="GeneratePrompt">-->
                        <!--              <el-input type="textarea" v-model="form.GeneratePrompt" style="max-width: 600px"-->
                        <!--                        :autosize="{ minRows: 30, maxRows: 100 }" placeholder="生成提示词"/>-->
                        <!--            </el-form-item>-->
                        <el-input type="textarea" v-model="form.GeneratePrompt" style="width: 100%"
                                  :autosize="{ minRows: 30, maxRows: 100 }" placeholder="生成提示词"/>
                    </el-col>
                </el-row>


                <!--        <el-row :gutter="10">-->
                <!--          <el-col :span="12">-->
                <!--            <el-form-item label="逻辑删除" prop="deleted">-->
                <!--              <el-switch v-model="form.deleted" :active-value="1" :inactive-value="0"/>-->
                <!--            </el-form-item>-->
                <!--          </el-col>-->
                <!--        </el-row>-->
                <el-divider/>
                <el-row :gutter="10">
                    <el-col :span="24" class="text-right">
                        <el-button @click="GeneratePromptFunc" type="warning">生成提示词</el-button>

                        <el-button @click="submitForm" type="primary">提交</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</div>

<!-- 引入ElementPlus的JavaScript文件 -->
<script src="https://unpkg.com/element-plus"></script>
<!-- 引入axios的JavaScript文件 -->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!-- 引入antd的JavaScript文件 -->
<!--<script src="https://cdn.jsdelivr.net/npm/antd@next"></script>-->
<script src="//docker.jmwebseo.cn/vue/vuestudy/single_page/tang/js/axios.min.js"></script>
<script src="//docker.jmwebseo.cn/vue/vuestudy/single_page/tang/js/qs.js"></script>
<script>
    // 引入 axios
    // const axios = require('axios');
    const {createApp} = Vue;
    const App = {
        data() {
            return {
                token: '',
                data: null,
                formRef:null,
                // 表单数据
                form: {
                    // id: 0,
                    // AI 提示表相关字段
                    title: '', // 标题
                    // user_id: 0, // 用户 id ,默认0
                    task_based_on: '', // 任务_根据
                    task_action: '', // 任务_动作
                    task_objective: '', // 任务_目标
                    reference_background_information: '', // 参考信息_背景目标
                    reference_processed_text: '', // 参考信息_待处理文本
                    output_requirement_content: '', // 输出要求_内容
                    output_standards: '', // 输出要求_标准
                    output_steps: '', // 输出要求_步骤
                    output_style: '', // 输出要求_风格要求
                    output_format: '', // 输出要求_格式要求
                    output_word_count: '', // 输出要求_字数要求
                    example1: '', // 示例1
                    example2: '', // 示例2
                    input: '', // 用户输入
                    output: '', // 指定输出任务
                    // deleted: 0, // 逻辑删除
                    // deleted_at: '', // 逻辑删除时间

                    GeneratePrompt: '', // 生成提示词

                    msg: ''
                }
            };
        },
        methods: {
            async fetchData() {
                try {
                    const response = await axios.get('http://127.0.0.1:8000/api/contracts');
                    this.data = response.data;
                } catch (error) {
                    console.error(error);
                }
            },
            initForm() {
                axios({
                    method: 'post',
                    url: 'http://app.tangchinese.org/api-app-data/?module=post&action=r_post_by_customize&platform=app',
                    data: Qs.stringify({
                        type: this.type,
                        user_id: this.user_id
                    })
                })
                    .then(function (response) {
                        console.log(response);
                        let data = response.data
                        if (data.rc === 0) {
                            // alert(data.msg)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },


            // 表单引用
            // const formRef = ref(null);

            // 提交表单
            submitForm() {
                this.formRef.value.validate((valid) => {
                    if (valid) {
                        // calculateRes();
                        this.saveRent();
                        // ElMessage.success('提交成功！');
                    } else {
                        // ElMessage.error('请检查您的输入！');
                        this.$message.error('请检查您的输入！');
                    }
                });
            },

            //

            async getMonthFunc(isThis) {
                const formData = reactive({
                    "c": "Fangzu",
                    "a": "getLastMonth",
                    // "token": store_access_token.value,
                    'paramsToken': '1',
                    'true_month': '1',
                    "floor": "2",
                    "yearStr": form.year,
                    "monthStr": isThis ? form.month : form.month - 1,
                });

                const response = await postServerData(formData);

                console.log(response);
                if (response.rc === 0 && response.data.length > 0) {
                    return response.data[0]
                }
            },


            // 获取上月数据
            async getLastMonthFunc() {
                const res = await getMonthFunc(false)
                console.log(res);

                this.form.lastMonthWater = res.shui1;

                form.lastMonthElectricityC = res.chufangdian;

                form.lastMonthElectricityB = res.fangdian1;

                form.lastMonthElectricityS = res.fangdian2;
            },

            async getPriceFunc() {
                // console.log('模拟 getPrice 登录');

                const formData = reactive({});

                try {
                    const response = await getPrice(formData);

                    console.log(response);
                    const {electricPrice, f2Price, tingchefei, waterPrice} = response.data;

                    form.waterFee = waterPrice;
                    form.electricityFee = electricPrice;
                    form.rentFloor2 = f2Price;
                    // form.rentFloor3 = f3Price;
                    form.parkingFeeFloor2 = tingchefei;
                    // form.parkingFeeFloor3 = 0;

                    form.rent = f2Price
                    form.row1Res = parseInt(f2Price) + parseInt(tingchefei);

                    // 创建一个Date对象，表示当前时间
                    var now = new Date();

// 使用getFullYear()方法获取年份
                    form.year = now.getFullYear()
                    form.month = now.getMonth()

                    // localStorage.setItem('waterFee', form.waterFee);

                } catch (error) {
                    console.log('数据请求失败');
                }
            },

            // 生成提示词
            // GeneratePromptFunc() {
            //
            //     this.form.GeneratePrompt = `标题：${this.form.title}\n` +
            //         `用户ID：${this.form.user_id}\n` +
            //         `任务_根据：${this.form.task_based_on}\n` +
            //         `任务_动作：${this.form.task_action}\n` +
            //         `任务_目标：${this.form.task_objective}\n` +
            //         `参考信息_背景目标：${this.form.reference_background_information}\n` +
            //         `参考信息_待处理文本：${this.form.reference_processed_text}\n` +
            //         `输出要求_内容：${this.form.output_requirement_content}\n` +
            //         `输出要求_标准：${this.form.output_standards}\n` +
            //         `输出要求_步骤：${this.form.output_steps}\n` +
            //         `输出要求_风格要求：${this.form.output_style}\n` +
            //         `输出要求_格式要求：${this.form.output_format}\n` +
            //         `输出要求_字数要求：${this.form.output_word_count}\n` +
            //         `示例1：${this.form.example1}\n` +
            //         `示例2：${this.form.example2}\n` +
            //         `输入：${this.form.input}\n` +
            //         `输出：${this.form.output}\n`;
            //
            //     console.log(this.form.GeneratePrompt);
            //
            // // },
            // // GeneratePromptFunc() {
            //     let prompt = '';
            //     for (let key in this.form) {
            //         if (this.form.hasOwnProperty(key) && (this.form[key]!== null && this.form[key]!== '')) {
            //             prompt += `${key}：${this.form[key]}\n`;
            //         }
            //     }
            //     this.form.GeneratePrompt = prompt;
            //     console.log(this.form.GeneratePrompt);
            // }
            GeneratePromptFunc() {
                const propertyMap = {
                    title: '标题',
                    user_id: '用户ID',
                    task_based_on: '任务_根据',
                    task_action: '任务_动作',
                    task_objective: '任务_目标',
                    reference_background_information: '参考信息_背景目标',
                    reference_processed_text: '参考信息_待处理文本',
                    output_requirement_content: '输出要求_内容',
                    output_standards: '输出要求_标准',
                    output_steps: '输出要求_步骤',
                    output_style: '输出要求_风格要求',
                    output_format: '输出要求_格式要求',
                    output_word_count: '输出要求_字数要求',
                    example1: '示例1',
                    example2: '示例2',
                    input: '输入',
                    output: '输出'
                };
                let prompt = '';
                for (let key in this.form) {
                    if (this.form.hasOwnProperty(key) && (this.form[key]!== null && this.form[key]!== '')) {
                        prompt += `${propertyMap[key]}：${this.form[key]}\n`;
                    }
                }
                this.form.GeneratePrompt = prompt;
                console.log(this.form.GeneratePrompt);
            },

            saveRent() {

                setTimeout(async () => {

                    const formData = {
                        "title": this.form.title,
                        "user_id": this.form.user_id,
                        "task_based_on": this.form.task_based_on,
                        "task_action": this.form.task_action,
                        "task_objective": this.form.task_objective,
                        "reference_background_information": this.form.reference_background_information,
                        "reference_processed_text": this.form.reference_processed_text,
                        "output_requirement_content": this.form.output_requirement_content,
                        "output_standards": this.form.output_standards,
                        "output_steps": this.form.output_steps,
                        "output_style": this.form.output_style,
                        "output_format": this.form.output_format,
                        "output_word_count": this.form.output_word_count,
                        "example1": this.form.example1,
                        "example2": this.form.example2,
                        "input": this.form.input,
                        "output": this.form.output,
                        // "deleted": form.deleted, // 如果需要提交逻辑删除字段
                        // "deleted_at": form.deleted_at, // 如果需要提交逻辑删除时间字段
                    };

                    console.log('this.param ');
                    console.log(formData);

// 将对象转换为 JSON 字符串
//             const jsonData = JSON.stringify(formData);
//
//             // const response = await aiPromptCreate(formData);
//             const response = await aiPromptCreate(jsonData);
//
//             console.log(response);
//             if (response.rc === 0) {
//                 ElMessage.success('提交成功！' + response.msg);
//             }
                }, 300);
            }

            // onMounted(() => {
            // token.value = localStorage.getItem('tp6_access_token');
            // store_access_token.value = localStorage.getItem('store_access_token');
            //
            // console.log('tp6_access_token.value => ', token.value)
            // console.log('store_access_token.value => ', store_access_token.value)
            // getPriceFunc();
            // })


        }
    };
    const app = createApp(App);
    app.use(ElementPlus);
    // app.use(antd);
    app.mount('#app');
</script>
</body>

</html>